<ix-modal-header
  [title]="'GUI Settings' | translate"
  [loading]="isFormLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form
      class="ix-form-container"
      [formGroup]="formGroup"
      (submit)="onSubmit()"
    >
      <ix-fieldset [title]="helptext.guiTitle | translate">
        <ix-select
          formControlName="theme"
          [label]="'Theme' | translate"
          [options]="options.themes"
          [required]="true"
        ></ix-select>
        <ix-with-manage-certificates-link>
          <ix-select
            formControlName="ui_certificate"
            [label]="helptext.uiCertificate.label | translate"
            [tooltip]="helptext.uiCertificate.tooltip | translate"
            [options]="options.ui_certificate"
            [required]="true"
          ></ix-select>
        </ix-with-manage-certificates-link>

        <ix-select
          formControlName="ui_address"
          [label]="helptext.uiAddress.label | translate"
          [tooltip]="helptext.uiAddress.tooltip | translate"
          [options]="options.ui_address"
          [required]="true"
          [multiple]="true"
        ></ix-select>

        <ix-select
          formControlName="ui_v6address"
          [label]="helptext.uiV6address.label | translate"
          [tooltip]="helptext.uiV6address.tooltip | translate"
          [options]="options.ui_v6address"
          [required]="true"
          [multiple]="true"
        ></ix-select>

        <ix-input
          type="number"
          formControlName="ui_port"
          [label]="helptext.uiPort.label | translate"
          [tooltip]="helptext.uiPort.tooltip | translate"
        ></ix-input>

        <ix-input
          type="number"
          formControlName="ui_httpsport"
          [label]="helptext.uiHttpsPort.label | translate"
          [tooltip]="helptext.uiHttpsPort.tooltip | translate"
        ></ix-input>

        <ix-select
          formControlName="ui_httpsprotocols"
          [label]="helptext.uiHttpsProtocols.label | translate"
          [tooltip]="helptext.uiHttpsProtocols.tooltip | translate"
          [options]="options.ui_httpsprotocols"
          [required]="true"
          [multiple]="true"
        ></ix-select>

        <ix-checkbox
          formControlName="ui_httpsredirect"
          [label]="helptext.uiHttpsRedirect.label | translate"
          [tooltip]="helptext.uiHttpsRedirect.tooltip | translate"
        ></ix-checkbox>
      </ix-fieldset>

      <ix-fieldset [title]="helptext.otherTitle | translate">
        <ix-checkbox
          formControlName="usage_collection"
          [label]="helptext.usageCollection.label | translate"
          [tooltip]="usageCollectionTooltip()"
        ></ix-checkbox>

        <ix-checkbox
          formControlName="ui_consolemsg"
          [label]="helptext.uiConsoleMessage.label | translate"
          [tooltip]="helptext.uiConsoleMessage.tooltip | translate"
        ></ix-checkbox>
      </ix-fieldset>

      <ix-form-actions>
        <button
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="formGroup.invalid || isFormLoading()"
        >
          {{ 'Save' | translate }}
        </button>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
